---
import ColorMap from "@/styles/PersonalThemeColor";
export interface Props {
  property?: boolean;
  color?: keyof typeof ColorMap;
  title?: string;
}

const { property, color, title } = Astro.props;
---

<div
  class="w-full flex py-10 flex-col md:flex-row"
  style={color &&
    ColorMap[color] && {
      "--theme-color": ColorMap[color].color,
    }}
>
  <div class="flex-1 md_container">
    {title && <h2 id={title}>{title}</h2>}
    <div class="w-full max-w-[320px] mb-3 md:hidden">
      <slot name="property" />
    </div>
    <slot />
  </div>
  <div
    class="item-property w-full max-w-[320px] mx-auto md:pl-4 text-white hidden md:block"
  >
    <slot name="property" />
  </div>
</div>

<style is:inline>
  .md_container > :first-child {
    margin-top: 0 !important;
  }
</style>
